<!--
 * @Description: 我的收藏页面组件
 * @Author: hai-27
 * @Date: 2020-02-20 17:22:56
 * @LastEditors: YaoXiaoTian
 * @LastEditTime: 2021-06-09 18:04:36
 -->
<template>
  <div class="collect">
    <Banner></Banner>
    <el-header>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="#CF975A"
        @select="handleSelect"
      >
        <el-menu-item index="1">文化景点</el-menu-item>
        <el-menu-item index="2">乡村景点</el-menu-item>
        <el-menu-item index="3">酒店名宿</el-menu-item>
        <el-menu-item index="4">餐饮美食</el-menu-item>
      </el-menu>
    </el-header>
    <div>
      <div class="sort">
        <span class="leftTip"></span>
        <span v-for="item in sortList" :key="item.key">
          <span
            @click="changeSort(item)"
            class="sortItem"
            :style="{ color: item.key == sortIndex ? '#CF975A' : '#666666' }"
          >
            {{ item.text }}
            <i class="el-icon-d-caret"></i>
          </span>
        </span>
      </div>
      <div class="list" v-if="tourismList && tourismList.length">
        <CulturalAttractions :data="tourismList" v-if="activeIndex == 1" />
        <RuralAttraction :data="tourismList" v-if="activeIndex == 2" />
        <FamousHotel :data="tourismList" v-if="activeIndex == 3" />
        <Dining :data="tourismList" v-if="activeIndex == 4" />
      </div>
      <Empty v-else />
      <div class="footer">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          layout="prev, pager, next"
          :total="total"
          hide-on-single-page
          @current-change="changePage"
          @prev-click="changePage"
          @next-click="changePage"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import Banner from "../../components/banner/index.vue";
import Empty from "../../components/Empty.vue";
import CulturalAttractions from "./components/culturalAttractions/CulturalAttractions";
import RuralAttraction from "./components/ruralAttraction/RuralAttraction";
import FamousHotel from "./components/famousHotel/FamousHotel";
import Dining from "./components/dining/Dining";
import { sortObj } from "../../utils/sort";
export default {
  data() {
    return {
      activeIndex: "1",
      sortIndex: "",
      tourismList: [],
      api: this.$apiPath.getCultureSpotNoCoordinate,
      page: 1,
      rows: 9,
      total: 0,
      sortList: [
        { key: 1, text: "好评优先" },
        { key: 2, text: "价格" },
      ],
      hotelName: "",
      cateringName: "",
      spotName: this.$route.query.search,
    };
  },
  components: {
    Banner,
    CulturalAttractions,
    RuralAttraction,
    FamousHotel,
    Dining,
    Empty,
  },
  created() {
    this.getSpotList();
  },
  watch: {
    $route: {
      handler() {
        // this.tourTitle = this.$route.query.search;
        this.currentPage = 1;
        if (this.activeIndex == 1 || this.activeIndex == 2) {
          this.spotName = this.$route.query.search;
          this.getSpotList();
        } else if (this.activeIndex == 3) {
          this.hotelName = this.$route.query.search;
          this.getHotelList();
        } else {
          this.cateringName = this.$route.query.search;
          this.getCateringList();
        }
        //深度监听，同时也可监听到param参数变化
      },
      deep: true,
    },
  },
  methods: {
    handleSelect(key) {
      this.sortIndex = "";
      this.activeIndex = key;
      if (this.activeIndex == 1 || this.activeIndex == 2) {
        this.api = this.$apiPath.getCultureSpotNoCoordinate;
        this.sortList = [{ key: 1, text: "好评优先" }];
        this.getSpotList();
      } else if (this.activeIndex == 3) {
        this.api = this.$apiPath.getHotelPageNoCoordinate;
        this.sortList = [
          { key: 1, text: "好评优先" },
          { key: 2, text: "价格" },
        ];
        this.getHotelList();
      } else if (this.activeIndex == 4) {
        this.api = this.$apiPath.getCateringPageNoCoordinate;
        this.sortList = [
          { key: 1, text: "好评优先" },
          { key: 2, text: "价格" },
        ];
        this.getCateringList();
      }
    },
    changeSort(item) {
      if (this.sortIndex == item.key) {
        this.sortIndex = "";
        sortObj(this.tourismList, "spotRecommend", "DESC");
      } else {
        this.sortIndex = item.key;
        if (item.key == 1) {
          if (this.activeIndex == 1 || this.activeIndex == 2) {
            sortObj(this.tourismList, "spotRecommend");
          } else {
            sortObj(this.tourismList, "recommendStar");
          }
        } else {
          if (this.activeIndex == 3) {
            sortObj(this.tourismList, "hotelPrice");
          } else {
            sortObj(this.tourismList, "cateringPrice");
          }
        }
      }
    },
    getSpotList() {
      let params = {
        page: this.page,
        rows: this.rows,
        spotType: this.activeIndex == 1 ? 0 : 1,
      };
      if (this.spotName) {
        params.spotName = this.spotName;
      }
      this.$http
        .fetch(this.api, {
          method: "get",
          params,
        })
        .then((res) => {
          if (res.code === 200) {
            this.tourismList = res.data.records;
            console.log(res.data.records);
            this.total = res.data.total;
            this.page = res.data.current;
            this.spotName = "";
          }
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
    getCateringList() {
      let params = {
        page: this.page,
        rows: this.rows,
      };
      if (this.cateringName) {
        params.cateringName = this.cateringName;
      }
      this.$http
        .fetch(this.api, {
          method: "get",
          params,
        })
        .then((res) => {
          if (res.code === 200) {
            this.tourismList = res.data.records;
            console.log(res.data.records);
            this.total = res.data.total;
            this.page = res.data.current;
            this.cateringName = "";
          }
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
    getHotelList() {
      let params = {
        page: this.page,
        rows: this.rows,
      };
      if (this.hotelName) {
        params.hotelName = this.hotelName;
      }
      this.$http
        .fetch(this.api, {
          method: "get",
          params,
        })
        .then((res) => {
          if (res.code === 200) {
            this.tourismList = res.data.records;
            this.total = res.data.total;
            this.page = res.data.current;
            this.hotelName = "";
          }
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
    changePage(e) {
      this.page = e;
      if (this.activeIndex == 1 || this.activeIndex == 2) {
        this.getSpotList();
      } else if (this.activeIndex == 3) {
        this.getHotelList();
      } else if (this.activeIndex == 4) {
        this.getCateringList();
      }
    },
  },
};
</script>
<style lang="less">
.collect {
  .list {
    width: 1225px;
    margin: 0 auto;
  }
  .sort {
    width: 1225px;
    height: 20px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .sortItem {
    display: inline-block;
    line-height: 20px;
    color: #666666;
    cursor: pointer;
    margin-right: 33px;
    i {
      font-size: 14px;
    }
  }
  .leftTip {
    display: inline-block;
    height: 20px;
    width: 4px;
    background-color: #cf975a;
    margin-right: 10px;
  }
  .footer {
    padding: 0;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 33px;
    background-color: #ffffff;
    .btn-prev {
      width: 74px;
      height: 30px;
      border: 1px solid #c7c7c7;
      border-radius: 15px;
    }
    .btn-next {
      width: 74px;
      height: 30px;
      border: 1px solid #c7c7c7;
      border-radius: 15px;
      color: #999999;
    }
    .el-pager li {
      width: 30px;
      height: 30px;
      border: 1px solid #c7c7c7;
      border-radius: 15px;
      color: #999999;
    }
    .el-pager {
      .number {
        text-align: center;
        padding: 0;
      }
      //   .number:hover {
      //     color: #999999 !important;
      //   }
      li:not(.active).number:hover {
        color: #999999 !important;
      }
    }
    .el-pager li:not(.disabled).active {
      background-color: #cf975a;
    }
  }
}
</style>
